<template>
    <!-- 搜索工作栏 -->
    <div class='header'>
        <div class="search-tools">
            <el-row style="margin-bottom: 10px; width: 100%">
                <el-col :span="6">
                    <el-input
                        :style="{ width: '220px'}"
                        placeholder="请输入标题"
                        v-model="searchParams.title"
                        size='small'
                        clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-select
                        v-model="searchParams.typeId"
                        size="small"
                        clearable
                        :style="{ width: '220px'}"
                        placeholder="请选择栏目">
                        <el-option
                            v-for="ele in columnList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col>
                <!-- <el-col :span="6">
                    <el-select
                        v-model="searchParams.status"
                        size="small"
                        clearable
                        :style="{ width: '220px'}"
                        placeholder="请选择发布动态">
                        <el-option
                            v-for="ele in activeList"
                            :key="ele.value"
                            :label="ele.label"
                            :value="ele.value">
                        </el-option>
                    </el-select>
                </el-col> -->
                <el-col :span="4">
                    <el-button @click="resetSearch" size="small">重置</el-button>
                    <el-button @click="handleSearch" size="small" type="primary">搜索</el-button>
                    <!-- <el-button @click="handleAdd" size="small" type="primary">新建</el-button> -->
                </el-col>
            </el-row>
            <el-row style="margin-bottom: 10px">
                <el-col>
                    <el-button @click="handleBatchRecovery" :disabled="tableSelectList.length === 0" 
                        type="primary" plain icon="el-icon-plus" size="mini">
                        批量还原
                    </el-button>
                </el-col>
            </el-row>
            
        </div>

        <Table ref="tableList"
            :tableConfig="leftTableConfig" 
            :tableData="tableData"
            :total="total"
            :pageNo="pageNo"
            :pageSize="pageSize"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @handleChangePage="handleChangePage">
            <template slot-scope="scope" slot="id">
                <div class="title-box">
                    <span>{{scope.data.index + (pageNo - 1) * pageSize + 1}}</span>
                </div>
            </template>
            <el-table-column align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <div class="btn-box">
                        <span class="btns" @click="handleRecovery(scope.row)">还原</span>
                    </div>
                </template>
            </el-table-column>
        </Table>
        <AddColumnPop ref="addColumnPop" @success="handleSearch" />
        <ViewNews ref="viewNews" />
        <ChooseTypePop ref="chooseTypePop" @confirmBack="confirmBack" />
    </div>
</template>
<script>
import Sortable from "sortablejs";
import { TYPE, recycleBinSearch, recycleBinTableConfig } from './initData';
import SearchBar from '@/views/components/SearchBar';
import Pagination from '@/views/components/Pagination'
import Table from "@/views/components/Table";
import AddColumnPop from './components/addColumnPop.vue';
import ViewNews from './components/viewNews.vue';
import BatchPush from './components/batchChangeColumn.vue';
import ChooseTypePop from '../components/chooseTypePop.vue';
import { getTableList, updateBatch, getColumnList } from '@/api/content-manage/researchResult.js';
import { formatDate } from '@/utils/index.js'
export default {
    name: 'NewsList',
    components: {
        SearchBar,
        Table,
        AddColumnPop,
        ViewNews,
        BatchPush,
        Pagination,
        ChooseTypePop
    },
    data() {
        return {
            searchConfig: recycleBinSearch,
            leftTableConfig: recycleBinTableConfig,
            tableData: [],
            total: 0,
            pageNo: 1,
            pageSize: 10,
            tableSelectList: [],
            sortable: null,
            searchParams: {},
            sortingFields: null,
            activeList: [{ label: '未发布', value: '0'}, { label: '已发布', value: '1'}],
            columnList: []
        }
    },
    created() {
        this.getList();
        this.getColumnList();
    },
    mounted() {
        // this.dragSort();
    },
    methods: {
        // 获取搜索框数据
        // transferSearchParams(params) {
        //     this.searchParams = params;
        // },
        async resetSearch () {
            this.searchParams = {};
            this.sortingFields = null;
            this.$refs.tableList && this.$refs.tableList.$children[0].clearSort();
            this.handleSearch();
        },
        handleSearch() {
            this.pageNo = 1;
            this.getList();
        },
        async getList() {
            const { code, data } = await getTableList({
                ...this.searchParams,
                sortingFields: this.sortingFields,
                type: TYPE,
                deleted: 1, // 写死
                pageNo: this.pageNo,
                pageSize: this.pageSize
            });
            if (code === 0) {
                this.tableData = data.list.map(v => {
                    return {
                        ...v,
                        createTimeStr: formatDate(v.createTime),
                        updateTimeStr: formatDate(v.updateTime),
                        releaseTimeStr: formatDate(v.releaseTime),
                        statusName: v.status === '0' ? '未发布' : '发布'
                    }
                });
                this.total = data.total;
            } else {
                this.tableData = [];
                this.total = [];
            }
        },
        // 获取栏目列表
        async getColumnList() {
            this.columnList = await this.columnListApi();
        },
        async columnListApi() {
            let columnList = [];
            const { code, data } = await getColumnList({
                pageNo: 1,
                pageSize: 1000,
                type: TYPE,
                status: '1'
            });
            if (code === 0 && data && data.list && data.list.length > 0) {
                columnList = data.list.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                });
            }
            return columnList;
        },
        handleSelectionChange(val) {
            this.tableSelectList = val;
        },
        handleChangePage({pageNo, pageSize}) {
            this.pageNo = pageNo;
            this.pageSize = pageSize;
            this.getList();
        },

        async handleRecovery(row) {
            if (row.typeId) {
                this.$confirm(`是否确认还原?`, '提示').then( async() => {
                    this.confirmBack(row);
                });
            } else {
                this.columnList = await this.columnListApi();
                this.$refs.chooseTypePop && this.$refs.chooseTypePop.open({row, columnList: this.columnList});
            }
        },

        async confirmBack({ id, typeId, done}) {
            const { code, msg } = await updateBatch({
                operate: 'recovery',
                ids: id ? [id] : this.tableSelectList.map(v => v.id),
                typeId: typeId,
                type: TYPE
            });
            if (code !== 0) {
                this.$message.error(msg);
                return
            };
            done && done();
            this.$message.success('还原成功');
            this.handleSearch();
        },

        async handleBatchRecovery() {
            if (!this.tableSelectList || this.tableSelectList.lengtg === 0) {
                this.$message.warning('请选择新闻');
                return;
            }
            this.columnList = await this.columnListApi();
            this.$refs.chooseTypePop && this.$refs.chooseTypePop.open({columnList: this.columnList});
        },

        sortChange(sortingFields) {
            this.sortingFields = sortingFields;
            this.handleSearch();

        }
    }
}
</script>

<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            flex-direction: column;
        }

        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
            }
            .delete {
                color: #f56c6c;
            }
        }
    }
</style>